<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select class="province">
        <option value="">省份</option>
        <!-- <option value="A001">北京</option>
        <option value="A002">上海</option>
        <option value="A003">湖北</option>
        <option value="A004">湖南</option> -->
    </select>
    <select class="city" name="" id="">
        <option value="">市/区</option>
        <option value="A001">朝阳</option>
        <option value="A002">海淀</option>
        <option value="A003">沙河</option>
        <option value="A004">上地</option>
    </select>
</body>
<script>
    // 省市二级联动

    // 请求数据 => 生成省份的下拉框   => 下拉框切换时(取值 -> 哪个省份) -> 找到对应的省份数据 -> 生成市/区的下拉框

    // 注意:
    // 1. 下拉框取值 value , 下拉框设置设置html结构 => innerHTML

    var proSel = document.getElementsByClassName("province")[0];
    var citySel = document.getElementsByClassName("city")[0];

    var xhr = new XMLHttpRequest(); // 0

    xhr.open("get", "../data/pro.json", true);  // 1

    xhr.send(); // 1

    xhr.onreadystatechange = function () {
        //  2 3 4
        // console.log(xhr.readyState);
        if (xhr.readyState == 4 && xhr.status == 200) {
            var result = xhr.responseText;
            // console.log(result);
            result = JSON.parse(result);
            console.log(result);

            var { list: proList } = result;

            // 根据获取数据渲染
            var html = "<option value=''>省份</option>";
            proList.forEach((item) => {
                console.log("item", item);
                var { city_id, city_name } = item;
                html += `<option value="${city_id}">${city_name}</option>`;
            })
            proSel.innerHTML = html;

            // 监听下拉框切换
            proSel.onchange = function () {
                console.log(this.value);
                var cityId = this.value;  // 下拉框切换时的省份id
                if (cityId) {
                    // 根据省份id找到对应的 省份数据
                    console.log(proList);
                    // var thisPro = proList.find((item) => item.city_id == cityId);
                    // var thisPro = proList.find((item) => {
                    //     var { city_id, city_name } = item;
                    //     return city_id == cityId;
                    // });

                    // 函数的参数解构:  如果函数的参数确定是数组或对象 => 可以对该参数进行解构
                    // var thisPro = proList.find(({ city_id, city_name } = item) => {
                    //     return city_id == cityId;
                    // });
                    // var thisPro = proList.find(({ city_id }) => {
                    //     return city_id == cityId;
                    // });
                    var thisPro = proList.find(({ city_id }) => city_id == cityId);
                    console.log(thisPro);

                    if (thisPro) {
                        var { list: cityList } = thisPro;

                        var html = "<option value=''>市/区</option>";
                        cityList.forEach((item) => {
                            console.log("item", item);
                            var { city_id, city_name } = item;
                            html += `<option value="${city_id}">${city_name}</option>`;
                        })
                        citySel.innerHTML = html;

                    }
                } else {
                    citySel.innerHTML = "<option value=''>市/区</option>";
                }
            }


        }

    }







</script>

</html>